<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

  <body>
    <div id="app"></div>
  </body>
  <script>
    let { reactive, createApp, h } = VueRuntimeDOM;

    const VueComponent = {
      props: {
        name: String,
        age: Number,
      },
      setup(props, { attrs, slots, emit,expose }) {
        console.log("=========");
        console.log(props);
        console.log(attrs, slots, emit);
        console.log("=========");
        const state = reactive({ name: "hu.lei", age: 20 });
        
        const sava = ()=>{
          alert('expose')
        }

        // 暴露自己的函数
        expose({
          sava
        })

        
        return () => {
          return h("div", [
            h("div", state.name),
            h("div", state.age),
            h(
              "button",
              { onClick: () => emit("textEvent", "emit") },
              "调用父组件函数"
            ),
          ]);
        };
      },
    };

    let app = createApp({
      render: () => {
        return h(VueComponent, {
          name: "hulei",
          age: 18,
          add: "上海",
          onTextEvent: (val) => alert(val),
        });
      },
    });
    app.mount("#app");
  </script>
</html>
